<template>
  <div class="open-layer-box">
    <div id="map" class="map"></div>
  </div>
</template>
<script setup>
// http://t0.tianditu.gov.cn/vec_c/wmts?tk=7a78bc560f14ba05e24791961deee361
import {onMounted} from "vue";

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {fromLonLat, get as getProjection, transform, transformExtent} from 'ol/proj.js';
import {getTopLeft, getWidth} from 'ol/extent.js';

onMounted(() => {
  initMap();
})

function initMap() {
  const projection = getProjection('EPSG:4490');

  var resolutions = [0.17578125327894775, 0.08789062663947399, 0.043945313319736994, 0.021972656659868472, 0.010986328329934226, 0.005493164164967124, 0.0027465820824835504, 0.0013732910412417797, 6.866455206208899E-4, 3.433227603104438E-4, 1.716613801552224E-4, 8.583069007761132E-5, 4.291534503880566E-5, 2.1457672519402802E-5, 1.0728836259701401E-5, 5.364418129850712E-6, 2.682209064925356E-6, 1.341104532462678E-6];
  var gridsetName = 'EPSG:4490_jsimage2014';
  var gridNames = ['EPSG:4490_jsimage2014:0', 'EPSG:4490_jsimage2014:1', 'EPSG:4490_jsimage2014:2', 'EPSG:4490_jsimage2014:3', 'EPSG:4490_jsimage2014:4', 'EPSG:4490_jsimage2014:5', 'EPSG:4490_jsimage2014:6', 'EPSG:4490_jsimage2014:7', 'EPSG:4490_jsimage2014:8', 'EPSG:4490_jsimage2014:9', 'EPSG:4490_jsimage2014:10', 'EPSG:4490_jsimage2014:11', 'EPSG:4490_jsimage2014:12', 'EPSG:4490_jsimage2014:13', 'EPSG:4490_jsimage2014:14', 'EPSG:4490_jsimage2014:15', 'EPSG:4490_jsimage2014:16', 'EPSG:4490_jsimage2014:17'];
  var baseUrl = '../service/wmts';
  var style = '';
  var format = 'image/jpeg';
  var infoFormat = 'text/html';
  var layerName = 'jsimage2014';


  const map = new Map({
    layers: [
      new TileLayer({
        source: new WMTS({
          // http://192.168.1.137:8080/geoserver/ows?service=WFS&version=1.1.0&request=GetCapabilities
          url: 'http://192.168.1.137:8080/geoserver/gwc/service/wmts?service=WFS&version=1.1.0&request=GetCapabilities', // 替换为实际的 WMTS 服务 URL
          layer: layerName, // 图层名
          matrixSet: gridsetName, // 瓦片矩阵集
          format: 'image/jpeg', // 格式
          tileGrid: new WMTSTileGrid({
            origin: [-180.0, 90.0],
            resolutions: resolutions,//决议。每个分辨率的数组索引都需要与缩放级别相匹配。这意味着，即使配置了minZoom，分辨率数组的长度也将为maxZoom+1
            // 根据你的 WMTS 服务设置缩放级别和范围
            tileSize: [256, 256], // 瓦片大小
            matrixIds: [
              'EPSG:4490_jsimage2014:0', 'EPSG:4490_jsimage2014:1',
              'EPSG:4490_jsimage2014:2', 'EPSG:4490_jsimage2014:3',
              'EPSG:4490_jsimage2014:4', 'EPSG:4490_jsimage2014:5',
              'EPSG:4490_jsimage2014:6', 'EPSG:4490_jsimage2014:7',
              'EPSG:4490_jsimage2014:8', 'EPSG:4490_jsimage2014:9',
              'EPSG:4490_jsimage2014:10', 'EPSG:4490_jsimage2014:11',
              'EPSG:4490_jsimage2014:12', 'EPSG:4490_jsimage2014:13',
              'EPSG:4490_jsimage2014:14', 'EPSG:4490_jsimage2014:15',
            ],//矩阵ID。此数组的长度需要与分辨率数组的长度相匹配。
          }),
          style: '',
          projection: 'EPSG:4490'
        }),
      }),
    ],
    target: 'map',
    view: new View({
      center: fromLonLat([113.11832, 27.81395]),
      zoom: 6,
    }),
  });

  map.getView().fit([116.35514,30.760937,121.90936,35.12627], map.getSize());

}

</script>
<style scoped>
.map {
  width: 100vw;
  height: 100vh;
  //background: #666;
}
</style>
